<template>
  <div class="questClass-box">


		<el-row >
					<el-row >
					<el-col :span="3"><el-button :disabled='!_disabled' @click="multiDel">删除</el-button></el-col>
					<!-- <el-col :span="3"><el-button @click="add_user_show=true;userdata=JSON.parse(JSON.stringify(new_userdata))" :disabled='!dept_id'>新增</el-button></el-col> -->
					<el-col :span='16'  >
						<el-col :span='12' >
							<el-input placeholder='请输入用户姓名' v-model='key_word_user'></el-input>
						</el-col>
						<el-col :span='4'  style='text-align: right;'>
							<el-button @click='search_user'>查询</el-button>
						</el-col>
					</el-col>
				</el-row>
				
				<el-table 
				:data='user_list'
				border
				@selection-change='table_select'>
					<el-table-column type='selection' width='55px' align='center'></el-table-column>
					<template v-for='item in tableinits'>
						<el-table-column :prop='item.prop' :label='item.label' align='cneter'></el-table-column>
					</template>
					<el-table-column label='状态'>
						<template slot-scope='scope'>
							<span>{{status[scope.row.status]}}</span>
						</template>
					</el-table-column>
					<el-table-column label='类型'>
						<template slot-scope='scope'>
							<span>{{typename[scope.row.type]?typename[scope.row.type]:'学员'}}</span>
						</template>
					</el-table-column>
					<el-table-column label='操作'>
						<template slot-scope='scope'>
							<el-button type='text' @click='reset(scope.row)'>重置密码</el-button>
						</template>
					</el-table-column>
				</el-table>
				

				<el-row style='text-align: right;margin-top: 15px;'>
					<el-pagination
						layout="prev, pager, next"
						:page-size="15"
						:current-page="pageNo"
						:total="total"
						@current-change="pageNoChange">
					</el-pagination>
				</el-row>
		</el-row>


		<el-dialog :visible='add_user_show' :title='dialog_title' @close='add_user_show=false' width='40%'>
			<el-form :model='userdata' label-width='100px' ref='dialog_form'>
				<el-form-item prop='name' label='登录名' :rules='{required:true,message:"该项必填"}'>
					<el-input v-model='userdata.name'></el-input>
				</el-form-item>
				<el-form-item prop='name' label='姓名' :rules='{required:true,message:"该项必填"}'>
					<el-input v-model='userdata.username'></el-input>
				</el-form-item>
				<el-form-item prop='name' label='类型' :rules='{required:true,message:"该项必填"}'>
					<el-select v-model='userdata.type'>
						<el-option v-for='item in usertype' :label='item.text' :value='item.type' :key='item.type'></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop='name' label='手机号' >
					<el-input v-model='userdata.mobile'></el-input>
				</el-form-item>
				<el-form-item prop='name' label='电子邮箱' >
					<el-input v-model='userdata.email'></el-input>
				</el-form-item>
			</el-form>
			<el-row style='margin-top:10px;text-align: center;'>
				<el-button @click='user_submit("dialog_form")' type='primary'>保存</el-button>
			</el-row>
		</el-dialog>
		
  </div>
</template>

<script>
import Table from '@/components/Table'
import { quest_fmt_getDepManage } from '@/util/dataFMT'
import multidel from '@/mixins/multidel'
let status = {active:"正常",delete:'删除'};
let typename = {admin:'管理员',visitor:'访客',vendor:'供应商'}
export default {
  name: 'DepManage',
  components: {
    Table
	},
	mixins:[multidel],
  mounted () {
//     this.$API.getDepManage()
//     .then(data => {
//       this.total = data.total
//       this.tableData = 	this.settree(data.data)
// 			console.log(this.tableData)
//     })
//     .catch(errmsg => {
//       console.log(errmsg)
//     })
  },
	created(){
		this.pageNoChange(1)
	},
  data () {
    return {
			key_word_user:'',
			status,
			typename,
			add_user_show:false,
			dialog_title:'新增人员',
      total: 0,
      pageNo: 1,
			usertype:[{type:'admin',text:'管理员'},{type:'trainee',text:'学员'},{type:"visitor",text:'访客'},{type:"vendor",text:'供应商'}],
			user_list:[],
			dept_id:'',
			new_userdata:{
				name:"",
				username:"",
				type:'',
				mobile:"",
				email:""
			},
			userdata:{},
			tables:[],
      tableData: [],
      tableinits: [
        { label: '登录名',  prop: 'name' },
        { label: '姓名', prop: 'username' },
      ],
    }
  },
	computed:{
		_disabled(){
			return this.tables.length
		}
	},
  methods: {
		multiDel () {
      this._mixMutiDel(`delUser`, () => {
        this.pageNoChange(1)
      })
    },
		search_user(){
			// 人员搜索
			
		this.getuserdata(1)	
		},
		edit_user(data){
			this.add_user_show=true;
			this.userdata = JSON.parse(JSON.stringify(this.new_userdata));
			this.$API.getOneUser(data.id).then(res=>{
				this.userdata = res
			})
		},
		reset(data){
			this.$prompt('请输入密码','重置密码',{
				inputPattern:/.{6,}/,
				inputErrorMessage:"不能少于6位数"
			}).then(res=>{
				this.$API.resetPassword(data.id,{password:res.value}).then(res=>{
					this.$message.success('修改成功')
				})
			}).catch(err=>{})
		},
		user_submit(name){
			this.$refs[name].validate(valid=>{
				if(valid){
					if(this.userdata.id){
						this.$API.editorUser(this.userdata.id,this.userdata).then(res=>{
							this.$message.success('修改成功')
							this.add_user_show=false;
							this.pageNoChange(1)
						})
					}else{
						this.userdata.dept_id = this.dept_id;
					this.$API.DepUserAdd(this.userdata).then(res=>{
						this.$message.success('创建成功')
						this.add_user_show=false;
						this.pageNoChange(1)
					})
					}
				}
			})
		},
		table_select(data){
			this.tables=data
			this._mixSelectionChange(data)
		},
		pageNoChange(index){
			this.pageNo = index;
			this.getuserdata(index)
		},
		getuserdata(index){
			let form = {
				page:index,
				type:'vendor',
				keyword:this.key_word_user
			}
			this.$API.getUserManage(form).then(res=>{
				this.total = res.total;
				this.user_list = res.data;
			})
		},
		treeactive(data,node){
			let form = {
				page:this.pageNo,
				type:'visitor'
			}
			this.dept_id = data.id
			this.getuserdata(form)
		},
		append(data){
			let _this = this
			this.$prompt('请输入新增部门名称','名称',{
				inputErrorMessage:'名称不能为空',
				inputPattern:/.{1,}/
			}).then(res=>{
				let params = {
					name:res.value,
					parent_id:data.id
				}
				_this.$API.DepAdd(params).then(res=>{
					this.$message.success('添加成功')
					_this.gettreedata()
				})
			})
		},
		editor(data){
			let _this = this;
			this.$prompt('修改部门名称','修改',{
				inputValue:data.name,
				inputErrorMessage:'名称不能为空',
				inputPattern:/.{1,}/
			}).then(res=>{
				console.log(res.value)
				data.name = res.value
				_this.$API.setDepName(data.id,data).then(res=>{
					_this.$message.success('修改成功');
					_this.gettreedata()
				})

			})
		},
		dele(data){
			this.$confirm(`确认要删除${data.name}?`,'提示').then(res=>{
				this.$API.DepDel(data.id).then(res=>{
					this.gettreedata()
					this.$message.success('删除成功')
				}).catch(re=>{})
			})

		},
		settree(data){
			let fa = (da) =>{
				let children = [];
				data.forEach(item=>{
					if(da.id == item.parent_id){
						children.push(fa(item))
					}
				})
				if(children.length){da.children=children}
				return da
			}
			let re = []
			data.forEach(item=>{
				if(item.parent_id === 0){
					re.push(fa(item))
				}
			})
			return re
		},
    gettreedata () {
      this.$API.getDepManage()
      .then(data => {
        this.tableData = 	this.settree(data)
      })
    },
    edit (scope) {
      console.log(scope)
      this.$message.info({
        message: `编辑按钮被按下`
      })
    },
    del (scope) {
      console.log(scope)
      this.$message.info({
        message: `删除按钮被按下`
      })
    },
    add () {
      this.$prompt('题库分类名称', '新增', {
        confirmButtonText: '保存',
        inputPattern: /.{1,}/,
        inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
        this.$API.addDepManage(value)
        .then(data => {
          this.pageNoChange(1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style>
 .questClass-box {
   text-align: left;
 }
 .custom-tree-node{
	 width: 100%;
	 display: flex;
	 flex-flow: row nowrap;
	 justify-content: space-between;
	 font-size: 14px;
	 align-items: center;
 }
 .el-tree-node{
	 padding: 5px 0;
 }
</style>
